<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script>
        /**
         * * 校验用户名是否存在
             1. 服务器响应的数据，在客户端使用时，要想当做json数据格式使用。有两种解决方案：
                 1. $.get(type):将最后一个参数type指定为"json"
                 2. 在服务器端设置MIME类型
                 response.setContentType("application/json;charset=utf-8");
         *
         *
         * */
        $(function () {
            $("#username").blur(function () {
                //获取username输出框中的值
                var username = $(this).val();
                $.get("findUserServlet",{"username":username},function (data) {
                    var msg = $("#msg");
                    //期望返回的data值
                    //      {"userExsit":true,"msg":"此用户名重复了"}
                    //      {"userExsit":false,"msg":"用户名可用"}
                    if (data.userExsit){
                        //用户名重复
                        msg.css("color","red");
                        msg.html(data.msg);
                    }else{
                        //不重复
                        msg.css("color","green");
                        msg.html(data.msg);
                    }
                },"JSON");
            })


        })
    </script>
</head>
<body>
<form>
    <input type="text" name="username" placeholder="请输出用户名" id="username">
    <span id="msg"></span>
    <br>
    <input type="password" name="password" placeholder="请输入密码"><br>
    <input type="password" name="checkPassword" placeholder="请确认密码">
</form>
</body>
</html>